<template>
	<view class="user_box">
		<Tips/>
		<view class="user_header" v-if="userInfo?.user_id">
			<view class="avatar">
				<Avatar :fileName="userInfo.user_avatar" size="104rpx"/>
			</view>
			<view class="info">
				<view class="info_top">
					<view class="nick_name">
						{{userInfo.nick_name}}
					</view>
				</view>
				<view class="info_bottom">
					<view class="sex item">
						<MyTag v-if="userInfo.sex===SexEnum.GIRL">
							<template #icon>
								<MyIcons size="14px" :src="joinSystemPath('girl.png')"/>
							</template>
							<template #info>
								美女
							</template>
						</MyTag>
						<MyTag v-else>
							<template #icon>
								<MyIcons size="14px" :src="joinSystemPath('boy.png')"/>
							</template>
							<template #info>
								帅哥
							</template>
						</MyTag>
					</view>
					<view class="item">
						<MyTag>
							<template #icon>
								<MyIcons size="14px" :src="joinSystemPath('joinDate.png')"/>
							</template>
							<template #info>
								入驻 {{joinDays}} 天
							</template>
						</MyTag>
					</view>
				</view>
			</view>
			<view class="user_illustration">
				<image 
					style="width: 288rpx; height: 160rpx;" 
					mode="aspectFit" 
					:src="joinSystemPath('getUserInfo.png')"/>
			</view>
		</view>
		<view class="wx_login_box" v-else>
			<MyButton bgc="#65BFC7" :clickFun="toLogin">
				<template #icon>
					<MyIcons :src="joinSystemPath('wx.png')" size="40rpx"></MyIcons>
				</template>
				&nbsp;微信快捷登录
			</MyButton>
		</view>
		<MyCard>
			<EditUserList></EditUserList>
		</MyCard>
		<MyCard>
			<AboutUsList></AboutUsList>
		</MyCard>
	</view>
</template>

<script setup>
	import Tips from '@/components/Tips/Tips.vue'
	import MyIcons from '@/components/MyIcons/MyIcons.vue'
	import Avatar from '@/components/Avatar/Avatar.vue'
	import EditUserList from '@/components/User/EditUserList/EditUserList.vue'
	import AboutUsList from '@/components/User/AboutUsList/AboutUsList.vue'
	import MyCard from '@/components/MyCard/MyCard.vue'
	import MyTag from '@/components/MyTag/MyTag.vue'
	import MyButton from '@/components/MyButton/MyButton.vue'
	
	import moment from 'moment'
	
	import {
		joinSystemPath
	} from '@/utils/imgJoinName.js'
	import {
		changeDate,
		toTimeStamp
	} from '@/utils/changeData'
	
	import {SexEnum} from '@/enum/GlobalEnum.js'
	
	import {onShow} from '@dcloudio/uni-app'
	import { reactive,ref,watch,toRefs, nextTick} from "vue"
	
	import {userStore} from '@/stores/user'
	import {dynamicStyleStore} from '@/stores/dynamicStyle.js'
	import {UserModel} from '@/service/model/user.js'
	
	const user_store=userStore()
	const dynamicStyle_store=dynamicStyleStore()
	
	const userModel = new UserModel()
	
	const userInfo=ref(user_store.userInfo)
	
	const joinDays = ref(0)
	
	watch(()=>user_store.userInfo,()=>{
		userInfo.value = user_store.userInfo
		getJoinSystemDays()
	})
	
	const {
		primary_hot_color,
		user_box_bgc,
		primary_text_color,
		primary_main_bgc
	} = dynamicStyle_store.globalStyle
	// } = toRefs(dynamicStyle_store.globalStyle)
	
	//前往账号登录页面
	const toLogin=()=>{
		uni.$emit('wxLogin')
		// uni.navigateTo({
		// 	url:'/pages/User/Login/Login'
		// })
	}
	
	// setTimeout(function() {
		// console.log('改变颜色',user_header_bgc.value)
		// user_header_bgc.value = 'blue'
		// dynamicStyle_store.globalStyle.user_header_bgc='green'
	// }, 3000);
	
	//获取用户信息
	const getUserInfo= async ()=>{
		// if(user_store.userInfo?.user_id) return
		if(!uni.getStorageSync('token')) return
		
		const {data,success} = await userModel.getUserInfo()
		if(success){
			data.createAt = changeDate(data.createAt)
			uni.$emit('userStore',data)
			userInfo.value=data
			getJoinSystemDays()
		}
	}
	
	//计算入驻天数
	const getJoinSystemDays=()=>{
		if(!userInfo.value?.user_id) return
		const timeFormat="YYYY-MM-DD"
		const nowDate = toTimeStamp(moment().format(timeFormat))
		const joinDate = toTimeStamp(moment(userInfo.value.createAt).format(timeFormat))
		let max = '', min = ''
		  if(nowDate>joinDate){
		    max = nowDate
		    min = joinDate
		  }else{
		    max = joinDate
		    min = nowDate
		  }

		joinDays.value = parseInt(((max-min)/(24*60*60*1000)).toFixed())+1
	}
	const tipFun=()=>{
		let count = uni.getStorageSync('tipCount')
		if(count!==undefined && Number(count)<2){ 
			uni.$emit('tips','由于短信成本太高，暂时关闭值日短信提醒，还望理解','info',3000)
			uni.setStorageSync('tipCount',Number(count)+1)
		}else if(count===undefined){
			uni.setStorageSync('tipCount',1)
			uni.$emit('tips','由于短信成本太高，暂时关闭值日短信提醒，还望理解','info',3000)
		}
	}
	onShow(()=>{
		getUserInfo()
		getJoinSystemDays()
		nextTick(()=>{
			// tipFun()
		})
	})
</script>

<style lang="less">
	image{
		will-change: transform;
	}
	.user_box{
		background-color: v-bind(primary_main_bgc);
		width: 100%;
		overflow: hidden;
	}
	.item{
		margin-right: 8rpx;
	}
	.user_header{
		background-color: v-bind(primary_hot_color);
		color: white;
		display: grid;
		grid-template-columns: 1fr 1fr 3fr;
		justify-items:center;
		align-items:center;
		column-gap:20rpx;
		padding-left: 48rpx;
		.user_illustration{
			justify-self:end;
		}
		.info{
			.info_top{
				font-size: 20rpx;
				margin-bottom: 16rpx;
				.nick_name{
					width: 280rpx;
					white-space:nowrap;
					text-overflow:ellipsis;
					overflow: hidden;
					font-size: 30rpx;
				}
			}
			.info_bottom{
				.item{
					display: inline-block;
					margin: -10rpx 0;
					margin-right: 12rpx;
				}
			}
		}
	}
	.wx_login_box{
		margin: 20rpx;
	}
</style>
